<!DOCTYPE html>
<!--
  copyright (c) 2011 Google Inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
</html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Fusion Tables Visual Story Builder</title>
  <style>
    .frame-default {
      background-color: #6699CC;
      border-color: #6699CC;
      color: white;
      font-family: sans-serif;
      font-weight: bold;
      font-style: normal;
    }
    .frame-header { width: 704px; }
    .frame-outer-w { width: 704px; }
    .frame-outer-h { height: 302px; }
    .frame-inner-w  {width: 700px; }
    .frame-inner-h { height: 300px; }
    .frame-chart-w { width: 500px; }
    .frame-p-w { width: 200px; }

    .thumb-outer-w { width: 144px; }
    .thumb-outer-h { height: 62px; }
    .thumb-inner-w { width: 140px; }
    .thumb-inner-h { height: 60px; }
    .thumb-chart-w {width: 100px; }
    .thumb-p-w { width: 40px; }

    .frame-p-no-pic { font-size: 25px; }
    .frame-p { font-size: 18px; }
    .thumb-p-no-pic { font-size: 5px; }
    .thumb-p { font-size: 4px; }
  </style>

  <link rel="stylesheet" href="res/story_builder.css">
  <link rel="stylesheet" href="res/story_frame.css">
  <link rel="stylesheet" href="res/story_slider.css">

  <script type="text/javascript" src="res/story_builder.js"></script>
  <script type="text/javascript">
    function initialize() {
      var storyBuilder = new fusiontables.StoryBuilder.Ui();
      storyBuilder.initGui();
      storyBuilder.insertDefaultFrame();
    }
  </script>
</head>

<body onload="initialize();">
  <h1>Fusion Tables Story Builder</h1>
  <p>This wizard helps you create a story told using Fusion Tables
  charts and images. The story can then be exported as HTML.</p>

  <table class="table-main"><tr>
    <td class="table-sidebar">
      <fieldset>
        <legend id='insert_frame'><img src="res/blank.gif"/>Insert frame
        </legend>
        <div id='insert_frame_content'>
          <div id="insert_chart_text"></div>
          <div id="insert_chart"></div>
          <div id="insert_text"></div>
        </div>
      </fieldset>

      <fieldset>
        <legend id='configure_frame'><img src="res/blank.gif"/>Configure frame
        </legend>
        <div id='configure_frame_content'>
          <table><tr>
            <tr><td>Width (px)</td>
              <td><div id="configure_width"></div></td></tr>
            <tr><td>Height (px)</td>
              <td><div id="configure_height"></div></td></tr>
            <td class="table-label">Theme color</td>
              <td><div id="configure_theme_color"></div></td></tr>
            <tr><td>Font color</td>
              <td><div id="configure_font_color"></div></td></tr>
            <tr><td>Font name</td>
              <td><div id="configure_font_name"></div></td></tr>
            <tr><td>Font style</td>
              <td><div class="goog-inline-block"><span
                  id="configure_font_bold"></span>Bold</div>
                <div class="goog-inline-block"><span
                    id="configure_font_italic"></span>Italic</div></td></tr>
            <tr><td>Font size (small)</td>
              <td><div id="configure_font_size_small"></div></td>
            <tr><td>Font size (large)</td>
              <td><div id="configure_font_size_large"></div></td>
          </tr></table>
        </div>
      </fieldset>

      <fieldset>
        <legend id='instructions'><img src="res/blank.gif"
          />Instructions</legend>
        <div id='instructions_content'>
          <ol>
            <li>Add a frame of the story by clicking on a button in the 'Insert
            frame' box above
            <li>Cut and paste a chart URL from Fusion Tables, or use any URL of
            an image. The dimension should be 500x300 pixels
            <ol>
              <li>To obtain a chart URL, go to a Fusion Tables visualization
              page (e.g.,<span class="code">Visualize &gt; Line</span>)
              <li>Click the 'Get embeddable code' button and copy all the
              text in the 'src' field (e.g., <span class="code">
                https://www.google.com/fusiontables/embedviz?<br>
                gco_chartArea=%7B%22top%22%3A%2230%22%7D&<br>
                containerId=gviz_canvas&q=select+col0%2C+col1+from+<br>
                1236257+&qrs=where+col0+%3E%3D+&qre=+and+col0+%3C%3D+<br>
                &qe=+order+by+col0+asc+limit+250&viz=GVIZ&t=LINE<br>
                &width=500&height=300</span>)
            </ol>
            <li>Type in any annotation for the chart
            <li>Colors and fonts can be changed using the 'Configure frame' box
            above, or by editing the CSS code in the generated HTML code in the
            'Export' tab
            <li>Hover over a frame to change the chart URL, delete, or duplicate
            the frame, or to move it forward or backward in the sequence
            <li>Preview the output by clicking on the 'Preview' tab
            <li>Cut and paste the HTML code in the 'Export' tab to your webpage.
            You can also embed this webpage as an iframe <span class="code">&lt;
            iframesrc="&lt;your webpage URL&gt;" &#47;&gt;</span>
          </ol>
        </div>
      </fieldset>

      <fieldset>
        <legend id='demo'><img src="res/blank.gif" />Sample chart URLs</legend>
        <div id='demo_content'>
          <div
            class="demo-url">https://www.google.com/fusiontables/embedviz?viz=MAP&amp;q=select+col8+from+771673+&amp;h=false&amp;lat=34.82038680443693&amp;lng=-277.44740575000003&amp;z=3&amp;t=1&amp;l=col8</div>
          <div class="demo-url">http://www.google.com/fusiontables/embedviz?containerId=gviz_canvas&amp;q=select+col0%2C+col1+from+1100901&amp;qe=+skip+0+limit+8&amp;viz=GVIZ&amp;t=PIE&amp;width=500&amp;height=300
          </div>
          <div class="demo-url">http://www.google.com/logos/2011/korea_day-2011-hp.jpg</div>
        </div>
      </fieldset>
    </td>

    <td id="tab_container">
      <div id="tab" class="goog-tab-bar goog-tab-bar-top">
        <div class="goog-rounded-tab goog-rounded-tab-selected">Build</div>
        <div class="goog-rounded-tab">Preview</div>
        <div class="goog-rounded-tab">Export</div>
      </div>
      <div id="tab_content" class="goog-tab-content" style="border-width:4px">
        <div id="frames"></div>
        <div id="preview"></div>
        <textarea id="export"></textarea>
      </div>
    </td>
</tr></table>
</body>
</html>
